• To create a multimedia kiosk production using Macromedia Director 4.0
Macintosh System Configuration
• Color Macintosh (processor: 68030 or higher)
• 8-bit color display card
• color monitor
• hard disk with 6 Mb disk space free
• 5Mb RAM minimum, 8 Mb preferred
• System 7.0 or later preferred
• QuickTime extension
Applications You Need
• Director 4.0
Files You Need
Graphics
• Bkgrd w/hole.pict
• Bkgrnd.pict
• M button.pict
• Macromedia Logo.pict
QuickTime Movie
• Director.QT
Sounds
• At Manic City
PICS Animation
• Twisty M
Director Movie
• Director Demo
Process Steps
1. Introduction to Director
2. Director's User Interface
3. Importing
4. Cast
5. Score Sequencing
6. Tools Window
7. Animation Path
8. Transitions
9. PICS Animation
10. Placing PICS Animation on the Stage
11. Preparing for Interactivity
12. Interactivity
13. Markers
14. Filling out the rest of the Score
15. QuickTime
16. Tempo
17. Sounds
18. Creating Projectors
1. Introduction to Director
Starting Director
• Install Director and the Quick Tour files onto your hard disk.
• Launch Director by double-clicking on the Director application icon.
Director 4.0
Today, we'll show you how to create a multimedia production using Director, the premiere authoring tool for multimedia production. Director allows you to combine and synchronize the five basic multimedia data types (text, graphics, animations, sound and video) into a multimedia production.
In this quick tour, we'll discuss three topics.
1. The process for creating multimedia productions in Director.
2. How to use Director to create a kiosk production.
3. Platform and distribution issues.
Before going any further, its helpful to understand the four basic steps used to develop multimedia productions in Director.
The first step is to assemble your media sources.
The second step is to layout or sequence the media sources that were just assembled.
The third step is to add interactivity.
The fourth step is to distribute the finished production.
Now, let's take a look at Director's user interface.
2. Director’s User Interface
• Select the Cast from the Windows menu
• Select the Score from the Windows menu
• Select the Control Panel from the Windows menu
Director is based on a stage production metaphor. That is, Director has a stage, a cast of characters, and a score that tells the cast members what to do, where to go, and when to be there.
The Stage is the entire screen and is where the actual presentation takes place. The Cast is the collection of multimedia elements such as images and sound that are used in a production. The Score is where the actions of the castmembers are sequenced and synchronized.
The Score measures time in frames and is where you sequence each of your media elements.
The Panel controls action on the stage with simple VCR-like controls.
As you can see, the entire user interface in Director 4.0 has been revised to make it easier and more efficient to use.
Now that you're familar with Director's user interface, we will begin to develop the kiosk production. Our production integrates a textured background, flying text, digital sound, animation, interactivity, and a QuickTime movie.
3. Importing
Import PICT images
• select Import... from File menu
• select PICT as the Import Type
• select Bkgrd w/hole.PICT
• import all
Import QuickTime Movie
• select Import... from File menu
• select QuickTime Movie as the Import Type
• select Director.QT file
• import
Import Sound
• select Import... from File menu
• select Sound as the Import Type
• select At Manic City
• import
As we discussed, the first step in developing our multimedia production is to assemble or collect the media elements to be used.
We can either import existing media elements or create new graphics and animations in Director.
In this case, we need to import the background images, the "M" button, Macromedia logo, QuickTime movie, and music.
The Cast window contains miniature representations or thumbnails of all artwork that is assembled into Director. Think of the Cast window as a multimedia database.
To do this, we select the Import option under the File menu.
Notice that we can import a variety of media sources as displayed in the pull-down menu consisting of the following formats: PICT, Mac Paint, Sound, Scrapbook, PICS, Director movies, and QuickTime movies. The support of many data types enables you to produce media-rich productions and presentations.
Once we select the import type and file to be imported, we can click the import button to bring the file into the Cast window.
4. Cast
• double-click on the Director.QT (Cast member # 5) castmember to display the QuickTime window
• play Director.QT movie
• close the Video window
• select the Cast window again
• select Cast Member Info... from Cast menu
• click on the OK button
The Cast window provides an easy way to organize and reference your source material as you develop your multimedia production.
The number of cast members allowed per movie has been expanded to a maximum of 32,000 (up from 512 in Director 3.1). Notice that the Cast window is now resizeble both horizontally and vertically.
Once the source material is brought into Director, we can use the Cast window to view and customize the behavior of each element. For example, we can double-click the QuickTime movie to preview it as you see here, or bring up the Cast Info window to manipulate the behavior of the particular item.
Another new feature in Director 4.0 is the customizable "Purge Priority" setting for individual cast members. This feature provides explicit control over when a cast member is purged from memory. This type of fine tuning will result in optimum playback performance.
Now that we have assembled our media sources, we need to layout where and when we want each media element to appear on the stage.
5. Score Sequencing
Parts of the Score
• select Score from Windows menu to show score
• click and drag across Score frame numbers to highlight all channels for several frames
• click and drag across Score channel numbers to highlight all frames for several channels
Placing the Background on the Stage
• select Bkgrnd.PICT (Cast member # 2) castmember in Cast window
• Move the Playback Head forward and backward to show that the Bkgrnd.PICT is displayed from frames 2 through 80. The layout or synchronization of the source material is the second step in our development process and is done using the Score window.
The Score is the heart and soul of Director since it allows us to integrate graphics, animations, sound, video, and text together to create compelling productions.
The Score can be thought of as a virtual piece of film that moves from left to right. Each column represents an individual frame of the movie. Each row or channel represents a layer in which cast members may appear. The lower (numerically) the channel, the further back the corresponding cast member is on the stage. The higher (numerically) the channel, the closer the cast member is to the front of the stage.
The channels are numbered from 1 through 48. This way, individual media elements can be overlayed on the stage in much the same way special effects are created for the movies or television shows.
New features in Director 4.0 include 48 channels (up from 24 in the previous version of Director), the ability to color cells in the Score, and drag and drop capability from the Cast window into the Score window. These features have been added to specifically address customer requests for more power in the Score.
Let's place the background on the stage by selecting the Bkgrnd.pict cast member and dragging it directly from the cast into the score window (channel 1, frame 2). The ability to drag a cast member directly from the cast window into the score window is another new feature implemented in the Director 4.0 release.
In order to keep the background on the stage for the entire length of the presentation, we need to fill up 80 frames of the score with this image. To do this, we select the object and then use the "In-between" option in the Score menu.
The "In-Between" menu option copies the selected image to each of the highlighted frames. Notice that as we move the Playback head in the Score, the background appears and disappears from the Stage as we move forward or backward in time.
6. Tools Window
Creating a Black Rectangle
• select channel 2, frame 3 in the Score
• select the Tools Window from the Windows menu
• select the filled rectangle tool
• drag out a rectangle starting at the upper left corner
of the screen
• drag select channel 2, frame 3 thru 80 in the Score
Tweening
• select In-Between Linear from the Score menu
Rewind and play the production using the Control Panel window. Notice that the actual frames per second is displayed.
The Tools Window in Director provides a quick and easy way to create objects for your production.
In this situation, we need to create a black rectangle as a backdrop for animated text in the next step.
Let's look at the production so far. When you use the Control Panel to rewind and play the production, notice that the actual frames per second playback rate is displayed. This is a new feature in Director 4.0 that will aid in the synchronization of sound and animation.
7. Animation Path
Setting Key frames
• select channel 3, frame 4 in the Score
• select Macromedia Logo. PICT (Cast member # 4) castmember in Cast window
• place the Macromedia Logo. PICT castmember at the upper right corner of the stage so that only the left edge is showing on the screen.
• copy frame 4 into frame 15
• shift-drag the Macromedia Logo to the center of the screen
• drag select channel 3, frame 4 thru 80 in the Score
Tweening
• select In-Between Linear from the Score menu
Let's place the Macromedia Logo on the upper right corner of the stage and tell Director to move the text to the middle of the stage using a technique called Key Frame Animation.
Key Frame Animation allows us to specify a beginning and end point in the animation path. Director then creates an animation by filling in the missing points based upon the key frames specified. Adding animation makes the presentation more exciting and maintains your audience's attention.
Let's select channel 3, frame 4 as the first key frame in the animation since we want the Macromedia logo to display on top of the background. Next, drag the image from the Cast onto the upper right corner of the Stage so that only the left edge is showing.
Copy the cell (channel 3, frame 4) and paste it into channel 3, frame 15. Frame 15 is the second key frame in the animation.
Next, shift-drag the Macromedia Logo to the center of the screen.
Lastly, drag select frames 4 thru 80 and perform the In-Between operation to finish the animation.
The power of Director lets us use the position of the Key Frames to define the path of the animation. By highlighting the range of frames and choosing In Between Special, we can define a smooth animation path across the highlighted frames. Alternatively, we can define each frame of the animation if desired.
Let's look at the production so far.
8. Transitions
Setting Transitions
Background Transition:
• double-click in transition channel, frame 2
• select Dissolve Pixels Fast
• Click on the Set button
Rectangle Transition:
• double-click in transition channel, frame 3
• select Wipe Right
• select eight 1/4 second intervals for the time delay
• select 2 for the chunk size
• Click on the Set button & rewind/play the movie
Now lets add some pizazz to the presentation. There are special channels in Director that enable the user to address the Tempo, Palette, Transitions, Sound, and Scripting.
The Transition channel is the channel above the first sound channel.
Transitions control the stage entrance and exit of objects. In this case, we'll tell Director to perform a Dissolve Pixels fast for the background when it first appears on the Stage.
The transitions we are adding will enhance the way the background and the black rectangle enters the stage.
Review the transitions.
9. PICS Animation
Import PICS Animation
• select channel 4, frame 17 in the Score
• select Import... from File menu
• select PICS as the Import Type
• select Twisty M.PICS
• import
Let's use another type of animation in our production. This time, we'll use a PICS animation which is an animation made up of individual PICT images.
In this case, the animation is the letter "M" twisting back and forth.
When you import a PICS animation into the Cast window, Director also adds the animation directly into the Score.
Let's first select channel 4, frame 17 in the Score and notice what happens when we import the animation. The animation is automatically added to the Cast and to the Score window.
10. Placing PICS Animation on the Stage
• select channel 4, frames 17 to 80
• click on the "M" in the center of the stage
• move the "M" to the upper left corner of the stage on top of the black rectangle
• play the presentation Now lets move the PICS animation to the upper left corner of the stage. After we changed the inking property of the animation, the background shows through correctly.
At this point, the presentation has a background, animated text, and a PICS animation.
Lets take a look at our presentation up to this point.
Next, lets add a button for interactivity.
11. Preparing for Interactivity
Placing the "M" Button on the Stage
• select channel 5, frame 80 in the Score
• select M Button.PICT (A13) castmember in Cast
• drag onto the Stage positioning the button in the middle of the stage on the bottom row.
In order to prepare for interactivity, we need to add a button that the user can use.
We want a QuickTime movie to display after the user clicks a button on the screen. This step will set us up for the third step in our development process which is adding interactivity.
Next, we will add a Lingo Script to the button.
12. Interactivity
Cast Scripts
• open Cast window
• select M button.PICT (Cast member # 3)
• select Cast Member Info... from Cast menu
• click on Script... button
• enter [go to "movie"] & close the window
Score Scripts
• click on script channel, frame 80
• click on frame script editor at top of Score
• enter [pause] & close the window
Now that we've finished the second phase of our development process, synchronizing our media elements, its time to move onto the third stage, adding Interactivity. Adding interactivity creates a more compelling presentation that draws in the user and increases information retention.
In this example, we're going to add intelligence to the button we just created through the scripting capabilities of Lingo, Director's Hypertalk-like scripting language. There are also four types of scripts in Director: Frame Scripts, Cast Scripts, Sprite Scripts, and Movie Info Scripts. Lingo scripts in Director 4.0 are also compiled for better performance.
In this example, we'll use Cast and Frame Scripts.
First, we'll add a script to the button to go to a frame where the movie is displayed. We are using a Marker named "movie" in the Score to easily identify a particular frame in the movie. We also could have specified a frame number instead.
Next, we'll add a script to a specific frame in the Score that will pause the playback head waiting for user input.
Now, let's add the marker to the score.
13. Markers
Setting a Marker
• open Score window
• drag the small triangular marker symbol from the left side of the Score to frame 85
• enter the name for the marker - "movie"
Markers easily identify a particular frame in the score.
In this case, we will drag a marker from the upper left side of the score and place it in frame 85.
We will also name the marker "movie".
14. Filling out the Rest of the Score
Placing the Background w/hole on the Stage
• select Bkgrd w/ holePICT (Cast member # 1) castmember in Cast
• drag directly into the Score channel 1, frame 85
Now that we have prepared our production for interactivity, we need to fill in frames 85 to 88 of the Score.
By completing this part of the production, we are maintaining the visual flow so that we can smoothly transition from one part of the score to another.
15. QuickTime
Placing the Director movie on the Stage
• select channel 6, frame 86 in the Score
• select Director.QT(Cast member # 5) castmember in Cast
• drag onto the Stage positioning the QuickTime movie in the beveled opening of the Stage.
Now we are ready to place the QuickTime movie into the framework we have just created.
As you can see, we have a beveled opening in the background for the QuickTime movie.
In this instance, we are using another method to add an object into the score. That is, we are dragging a cast member directly from the cast window onto the stage.
16. Tempo
Wait for QuickTime
• Double-click tempo channel, frame 86
• Set tempo to Wait For QuickTime Movie to Finish In Channel...
• Type 6 into Channel Number
• Click the OK button
The last thing we are going to add in the Score is a Wait for QuickTime in the Tempo channel.
The Tempo channel is the channel with the clock icon and enables us to precisely control the flow of the presentation.
We have control over the frame rate for playback and can set time delays, wait for user interaction, and waits for sounds to finish playing before moving ahead in the presentation.
In this example, we want the QuickTime movie to play completely before the playback head advances in the Score.
Review.
17. Sounds
Setting sound
• select sound At Manic City from the cast window
• drag directly into sound channel 1, frames 1
• drag select frames 1 through 79
• select In-Between Linear from the Score menu
• review. Next, let's add the sound to this presentation. Adding sounds to presentations and productions really grabs the user's attention and adds impact to the point you are trying to make.
The Sound channel can be identified by its speaker icon and allows us to add music, sounds, and voice-overs to our production. There are two sound channels that can be used to combine voice with music or sound effects.
The method for adding sounds into the score has been streamlined in Director 4.0 and is more consistent with the way other types of objects are added into your production.
Let's take a look at the presentation so far.
18. Create Projector
• Select the "Save and Compact" option under the File menu to save your new movie.
• Select the Create Projector menu option from the File menu
• Select the movie you just saved in the Source Movies dialog box.
• Click on the Add button to add your movie into the Movie Play Order dialog box.
• Click on the Create button to create your new Projector.
• Click on the Done button when finished.
The fourth and final step in our development process is to distribute our completed production. There are three ways to distribute Director productions:
1. Playback as an application on other Macintosh computers with Director installed.
2. Run as a Player using the Macintosh or Windows Player.
3. Videotape. By the way Director also supports frame-by-frame recording for broadcast quality videotape production.
This section will focus on Projector creation since this is the way most Director productions are currently distributed on the Macintosh and Windows platforms.
The Projector creation process has been integrated into the Director program for the 4.0 release. Projectors are basically run time versions of Director productions that can be easily distributed and played back on machines without the Macromedia Director program.
Projectors enable a user to view and interact with your finished Director production, but is not in a format that can be opened or modified thus protecting your creative property.
Conclusion
You have seen how quick and easy it is to use Director to create and combine animations, text, graphics and video frame sequences and synchronize it all with sound. With Director you can turn your ideas into professional multimedia productions for playback on millions of Macintosh and Windows desktops.
Using Director 4.0 allows you to be the director creating powerful multimedia presentations, entertainment and educational CD-ROM titles, visualizations, training applications and desktop video productions. It is this multimedia integration, animation, and interactivity power which makes Director the premiere authoring tool for multimedia productions.
